<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>商品分类</title>
  <link rel="stylesheet" href="{__CSS__}/element_ui.css"/>
  <link rel="stylesheet" href="{__CSS__}/style.css"/>
  <script src="{__JS__}/vue2.js"></script>
  <script src="{__JS__}/element_ui.js"></script>
  <script src="{__JS__}/axios.min.js"></script>
  <script src="{__JS__}/request.js"></script>
</head>
<body>
<div id="app">
  <div class="app-loading" v-if="pageLoading">
    <div class="app-loading__logo">
      <img src="{__IMG__}/logo.png"/>
    </div>
    <div class="app-loading__loader"></div>
    <div class="app-loading__title">{$title}</div>
  </div>
  <el-card class="box-card" v-else>
    <div slot="header" class="clearfix">
      <span>商品分类</span>
    </div>
    <el-button type="primary" icon="el-icon-plus" size="small" @click="addTopCate">添加顶级分类</el-button>
    <div style="width:100%;height:0;border-bottom:#E4E7ED 1px dashed;margin-top: 10px"></div>
    <el-table
            :data="tableData"
            style="width: 100%;"
            row-key="id"
            :tree-props="{children: 'child'}">
      <el-table-column
              type=""
              prop="id"
              label="ID">
      </el-table-column>
      <el-table-column
              prop="name"
              label="分类名">
      </el-table-column>
      <el-table-column
              label="图标">
        <template slot-scope="scope">
          <el-image style="width: 30px; height: 30px" :src="scope.row.icon"></el-image>
        </template>
      </el-table-column>
      <el-table-column
              prop="sort"
              label="排序">
      </el-table-column>
      <el-table-column
              prop="status"
              label="是否显示">
        <template slot-scope="scope">
          <el-tag type="success" v-if="scope.row.status == 1">显示</el-tag>
          <el-tag type="danger" v-else>隐藏</el-tag>
        </template>
      </el-table-column>
      <el-table-column
              prop="create_time"
              label="添加时间">
      </el-table-column>
      <el-table-column
              prop="operation"
              label="操作">
        <template slot-scope="scope">
          <el-button @click="handleAddSub(scope.row)" type="text" size="small" v-if="scope.row.level != 3">子分类</el-button>
          <el-button @click="handleEdit(scope.row)" type="text" size="small">编辑</el-button>
          <el-button @click="handleDel(scope.row)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</div>

<script>
  new Vue({
    el: '#app',
    data: function () {
      return {
        pageLoading: true,
        tableData: [],
        baseIndex: '/admin/',
        dialogCateVisible: false,
        title: '添加顶级分类',
        form: {}
      }
    },
    mounted() {
      this.getList()
      this.pageLoading = false
    },
    methods: {
      // 添加顶级分类
      addTopCate() {
        window.location.href = this.baseIndex + 'goodsCate/add?pid=0&pname=顶级节点'
      },
      // 获取列表
      async getList() {
        let res = await request.get(this.baseIndex + 'goodsCate/index')
        this.tableData = res.data
      },
      // 添加子分类
      handleAddSub(item) {
        window.location.href = this.baseIndex + 'goodsCate/add?pid=' + item.id + '&pname=' + item.name
      },
      // 编辑子分类
      handleEdit(item) {
        window.location.href = this.baseIndex + 'goodsCate/edit?pid=' + item.pid + '&id=' + item.id
      },
      handleDel(item) {
        this.$confirm('此操作将永久删除该分类, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          let res = await request.get(this.baseIndex + 'goodsCate/del', {id: item.id})
          if (res.code == 0) {
            this.$message.success(res.msg)
            this.getList()
          } else {
            this.$message.error(res.msg)
          }
        }).catch(() => {});
      }
    }
  });
</script>

</body>
</html>